<template>
	<view class="navbar">
		<view class="navbar-fixed" :style="{background: background}">
			<!-- 状态栏 -->
			<!-- #ifndef MP-ALIPAY -->
			<view :style="{height:statusBarHeight+'px'}"></view>
			<!-- #endif -->
			<!-- 导航栏内容 -->
			<view class="navbar-content flex align-center" :style="{height:navBarHeight+'px'}">
				<slot name="back">
					<block v-if="showBack">
						<view class="navbar-back-icons" @click="back">
							<text class="iconfont font-size-42">&#xe64a;</text>
						</view>
					</block>
					<view style="min-width: 40rpx; height: 60rpx;"></view>
				</slot>
				<slot name="title">
					<view class="navbar-title">
						<text class="font-weight-normal" :style="{color: titleColor, fontSize: '17px'}">{{ title }}</text>
					</view>
				</slot> 
				<slot name="right">
					<view class="rigth-icon"></view>
					<view style="min-width: 40rpx; height: 60rpx;"></view>
				</slot> 
			</view>
		</view>
		<view v-if="isHeight" :style="{width: '100%', height: statusBarHeight+navBarHeight+'px'}"></view>
	</view>
</template>

<script>
	export default {
		props: {
			showBack: {
				type: Boolean,
				default: false
			},				// 是否显示返回按钮
			backStatus: {
				type: Boolean,
				default: true
			},
			isHeight: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: ''
			},					// 页面标题
			titleColor: {
				type: String,
				default: '#000000'
			},				// 页面标题颜色
			background: {
				type: String,
				default: '#FAFAFA'
			},				// 页面标题背景颜色
		},
		data() {
			return {
				statusBarHeight: 20,
				navBarHeight: 45,
				windowWidth: 375,
				val: '',
			};
		},
		created() {
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度
			this.statusBarHeight = info.statusBarHeight
			this.windowWidth = info.windowWidth
			// h5 app mp-alipay
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
			this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight) + 4
			this.windowWidth = menuButtonInfo.left
			// #endif
			// #ifdef MP-ALIPAY
			this.statusBarHeight = 0
			// #endif
			this.$emit('init', this.statusBarHeight+this.navBarHeight+'px')
		},
		mounted() {
			
		},
		methods: {
			back() {
				if (this.backStatus) {
					// #ifdef H5
					history.back()
					// #endif
					// #ifndef H5
					uni.navigateBack()
					// #endif
				}
				this.$emit('back')
			}
		}
	}
</script>

<style lang="scss">
	.navbar {
		.navbar-fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999999;
			width: 100%;
			

			.navbar-content {
				position: relative;
				display: flex;
				align-items: center;
				// padding: 0 16rpx;
				height: 90rpx;
				box-sizing: border-box;
				// padding: 0 24rpx;
				justify-content: space-between;
			}
			
			.rigth-icon{
				position: absolute;
				right: 0;
				z-index: 9999;
				padding-right: 28rpx;
			}
			
			.navbar-back-icons{
				position: absolute;
				left: 0;
				z-index: 9999;
				min-width: 60rpx;
				min-height: 60rpx;
				font-weight: 500;
				font-size: 22px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.navbar-title{
				flex: 1;
				height: 60rpx;
				line-height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// #ifdef MP-WEIXIN
				justify-content: left;
				// #endif
				// #ifdef MP-WEIXIN
				padding-left: 24rpx;
				// #endif
			}
		}
	}
</style>
